<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 
      1. id选择器
        写法：
          css：#elem{}
          html：id=”elem”
        注意点：
          • 在一个页面中，id值是唯一的
          • 命名规范：字母 _ - 数字组合而成，并且第一位不能是数字
          • 命名方式：驼峰式（searchSmallButton）、下划线式（search_small_button）、短线式（search-small-button）

      2.class选择器
          写法
          css：.elem{}
          html：class=”elem”
          注意点：
            • class选择器是可以复用的
            • 可以添加多个class样式
            • 多个标签的时候，样式的优先级根据CSS中的顺序决定的，而不是class属性中的顺序
            • 标签+类名的写法
                  例如：div.className     注意，标签和类名中间没有空格
      
      3.标签选择器（TAG选择器）
          写法：
            css：div{ }
            html：<div>

          使用的场景：
            • 去掉某些标签的默认样式时
            • 复杂的选择器中，如层次选择器

      4.群组选择器（分组选择器）
          可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

      5.通配选择器
          *{ }
          因为会给所有标签添加样式，所以要慎用。  
      
      6.层次选择器
        • 后代：M N { }   这种子孙后代都会包含
        • 父子：M > N { } 只有父子层级会被选中
        • 兄弟：M ~ N { }  会找到M下面的所有N兄弟标签，注意，M上面的兄弟N标签不会被选中
        • 相邻：M + N { }   当前M标签下面相邻的N标签 注意：是下面相邻的，也就是说只会选中一个

      7.属性选择器
          选择器	                  说明
          [attr]	          用于选取带有指定属性的元素
          [attr=value]	    用于选取带有指定属性和值的元素
          [attr~=value]	    用于选取属性值中包含指定词汇的元素，这里不是在一个词中找含有的value，而是多个 中还有的value单词
          [attr|=value]	  用于选取带有以指定值开头的属性值的元素,注意这里会找value开头的单词以及整个单词就只有value的，
          [attr^=value]	    匹配属性值以指定值开头的每个元素，这里和[attr|=value]的区别在于，当属性值中有多个（空格隔开且开头的那个词正好是value），那么一个时[attr|=value]	才会选中，多个不行，而[attr^=value]	都可以选中
          
          [attr$=value]	    匹配属性值以指定值结尾的每个元素，
          [attr*=value]	    匹配属性值中包含指定值的每个元素,只要时含有value元素都会被选中
        符号含义：
              =：完全匹配
              *=：部分匹配
              ^=：起始匹配         
              $=：结束匹配        
              [ ] [ ] [ ]：组合匹配 注意，多个[]是要同时满足才能选中

      8.伪类选择器
          CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
          写法：M：伪类{ }
          • :link 访问前M的样式（只能添加给a标签）
          • :visited 访问后M的样式（只能添加给a标签）
          • :hover 鼠标移入时M的样式（可以添加给所有标签）
          • :active 鼠标按下时M的样式（可以添加给所有标签）
              如果4个伪类都生效，一定要注意顺序：L V H A （也就是link visited，hover，active）
              一般的网站不会对a链接做4个操作，只会设置a{ }和a:hover{ }
          • :after、:before 通过伪类的方式给元素添加一个文本内容
          • :checked、:disable、:focus 都是针对表单元素的

        9.结构伪类选择器
          • :nth-of-tpye(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
          • :nth-child(n) 选择器匹配属于其父元素的第n个子元素，不论元素的类型
                nth-of-type 和nth-child的区别是前者找父级下的所有相同的兄弟元素，后者会从相同父元素下的第一个元素(注意是从父元素下的抵押给元素，不管是什么元素)开始找第n个元素，不论是什么元素
          • :first-of-type
          • :first-child
          • :last-of-type
          • :last-chilid

          • :only-of-type
          • :only-child
              only 顾名思义，就是唯一子元素的意思，
              两者区别在于 only-of-type 是选中父级元素下的唯一子元素，注意，这个父级元素下，是可以有其他元素的。
              而only-child 要是选中父级元素下的唯一子元素，但是这个父级下的子元素有且只能有唯一个元素


   -->
   <style>
     /* 1. id选择器 */
      /* #div1{
        background-color: red;
        width: 300px;
        height: 300px;
      }

      /* 2.类选择器 */
      /* 2.1 */
      /* .backClass{
        background-color: black;
        width: 200px;
        height: 200px;
      } */
      /* 2.2 */
      /* .class2{
        background-color: green;
        width: 200px;
        height: 200px;
      }
      .class1{
        border: 1px red solid;
        background-color: black;
      } */
      /* 2.3 */
      /* div.class3{
        border: 1px red solid;
        background-color: black;
        width: 300px;
        height: 300px;
      } */
      /*4.群组选择器  */
      /* .class4,#id4{
        background-color: red;
        width: 300px;
        height: 300px;
        border: 2px black solid;
      } */
      /* 6 层次选择器 */
      /* 6.1 后代*/
        /* #div1 span{
         color: red;
        } */
      /* 6.2 父子 */
        /* #div1 > span{
          color: red;
        } */
      /* 6.3 兄弟 */
      /* #li1 ~ li{
        color: red;
      } */
      /* 6.4 相邻 */
      /* #li1 + li{
        color: red;
      } */
     
      /* 7  属性选择器*/
      /* 7.1 [attr] */
      /* span[name]{
        color: red;
      } */
      /* 7.2 [attr=value] */
      /* span[name=span]{
        color: red;
      } */
      /* 7.3 [attr~=value] */
      /* span[name~=test]{
        color: red;
      } */

      /* 7.4 [attr|=value] */
        /* span[name|=test]{
          color: red;
        } */

      /* 7.5 [attr^=value] */
      /* span[name^=test]{
          color: red;
        } */

      /* 7.6 [attr$=value] */
        /* span[name$=bbb]{
          color: red;
        } */

      /* 7.7 [attr*=value] */
        /* span[name*=s]{
          color: red;
        } */

      /* 7.8[][][] */
      /* span[name^=span][name$=test]{
        color: red;
      } */

      /* 8 伪类选择器*/
      /* 8.1 link visited */
      /* a:link{
        color: red;
      }
      a:visited{
        color: blue;
      } */

      /* 8.2 hover active */
      /* .div1{
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .div1:hover{
        background-color: blue;
      }
      .div1:active{
        background-color: yellow;
      } */
      /* 8.3 after before */
      /* p::after{
        content: '这是内容2';
      }
      p::before{
        content: '这是内容0';
      } */
      /* 8.4 :checked */
      /* input:checked{
        width: 20px;
        height: 20px;
      } */
      /*  8.5 :disable */
      /* input:disabled{
        width: 400px;
      } */

      /* 8.6 :focus */
      /* input:focus{
        color: red;
      } */

      /* 9 结构伪类选择器 */
      /*  9.1  nth-of-tpye(n) */
      /* li:nth-of-type(3){
        color: red;
      } */
      /*  9.2  nth-child(n) */
      /* li:nth-child(3){
        color: red;
      } */
      /* 9.3 first-of-type first-child */
      /* li:first-of-type{
        color: red;
      }  */
      /* li:first-child{
        color: red;
      } */
      /* 9.4 last-of-type last-child */
      /* li:last-of-type{
        color: red;
      } */
      /* li:last-child{
        color: red;
      } */
      /* 9.5  only-of-type*/
      /* p:only-of-type{
        color: red;
      } */
      /* 9.6 only-child */
      /* ul > p:only-child{
        color: red;
      }
      div > p:only-child{
        color: red;
      } */

   </style>
</head>

<body>
    <!-- 1. id选择器 -->
    <!-- <div id="div1"></div> -->

    <!-- 2. 类选择器 -->
    <!-- 2.1 -->
    <!-- <div class="backClass"></div> -->
    <!-- 2.2 -->
    <!-- <div class="class1 class2"></div>
    <div class="class2 class1"></div> -->
      <!-- 2.3 -->
     <!-- <p class="class3"></p>
     <div class="class3"></div> -->

      <!-- 4 群组选择器 -->
      <!-- <div class="class4"></div>
      <div id="id4"></div> -->

        <!-- 6 层次选择器  -->
        <!-- 6.1 后代 ,6.2 父子 -->
        <!-- <div id="div1">
          <span>这个是子</span> 
          <div> <span>这个是孙</span> </div>
        </div> -->
        <!--  6.3 兄弟  6.4 相邻 -->
        <!-- <ul>
          <li>111111</li>
          <li id="li1">2222222</li>
          <li>33333</li>
          <li>44444</li>
          <li>5555555</li>
        </ul> -->
        <!-- 7  属性选择器 7.1 [attr] -->
        <!-- <span>1111111111</span>
        <span name="test">2222222222222</span> -->

        <!-- 7.2 [attr=value] -->
        <!-- <span name="span">1111111111</span>
        <span name="test">2222222222222</span> -->
        <!-- 7.3 [attr~=value] 这里的属性值是单独的，用空格隔开的
            7.4  [attr|=value]
            7.5 [attr^=value]
            7.6 [attr$=value]
            7.7 [attr*=value]
            7.8 [][][]
        -->
        <!-- <span name="span test">1111111111</span>
        <span name="test aaa">2222222222222</span>
        <span name="testaaa">333333333333333</span>
        <span name="span bbb">444444444444</span>
        <span name="test-aa cc">5555555555</span>
        <span name="test-bbb">666666666666</span> -->
      
        <!--  8 伪类选择器 8.1 link visited -->
      <!-- <a href="#">this is a link</a> -->
      <!-- 8.2 hover active -->
      <!-- <div class="div1"></div> -->
      <!-- 8.3 after before -->
      <!-- <p>这个是内容1</p> -->
      <!-- 8.4 :checked、:focus -->
      <!-- <input type="checkbox">aaa 
      <input type="checkbox">bbb 
      <input type="checkbox">ccc  -->
          <!-- 8.5 :disable -->
      <!-- <input type="text" disabled>
      <input type="text"> -->
           <!-- 8.6 :focus -->
        <!-- <input type="text" > -->

        <!-- 9 结构伪类选择器 -->
        <!-- 9.1  nth-of-tpye(n)
            9.2 nth-child  
            9.3 first-of-type first-child
            9.4  last-of-type last-child
            9.5 only-of-type
        -->
        <ul>
          <p>xxxxxxx</p>
          <li>11111</li>
          <li>22222</li>
          <div>xxxxxxx</div>
          <li>333333</li>
          <li>444444</li>
          <li>5555555</li>
        </ul>
      <!-- 9.6 only-child    -->
        <div>
          <p>only-child</p>
        </div>
</body>
</html>